<template>
    <div class="love">
        土味情话列表：<button @click="add">点我添加</button>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import {ref} from "vue"
import axios from 'axios'



const list = ref([
    "你最喜欢哪只鸡"])

function add() {
    axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then(res => {
        list.value.push(res.data.content)
    }).catch(err => {
        alert("请求太过频繁，请稍后再试")
    })
}

</script>

<style scoped>
.love {
    margin: 20px 0;
    background-color: rgb(126, 228, 208);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>